<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">

    <body>

        <ui:composition template="./Template/Template.xhtml">

            <ui:define name="title">
                Register
            </ui:define>

            <ui:define name="content">
                Register
                <h:form id="mainForm">
                    <p:outputPanel id="registerPanel">
                        <p:messages showDetail="true" showSummary="true"/>
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Name" />
                            <p:inputText value="#{employeesBean.name}"
                                         required="true" requiredMessage="please enter name"/>

                            <h:outputLabel value="Country" />
                            <p:inputText value="#{employeesBean.country}"
                                         required="true" requiredMessage="please enter country"/>

                            <h:outputLabel value="Birthday" />
                            <p:calendar value="#{employeesBean.birthDay}"
                                        required="true" requiredMessage="please enter birthday"
                                        maxdate="#{employeesBean.today}"
                                        navigator="true" yearRange="c-30:c+30"
                                        pattern="dd/MMM/yyyy"/>

                            <h:outputLabel value="Gender" />
                            <h:selectOneRadio value="#{employeesBean.male}" required="true"
                                              requiredMessage="please enter gender">
                                <f:selectItem itemLabel="Male" itemValue="true"/>
                                <f:selectItem itemLabel="Female" itemValue="false"/>
                            </h:selectOneRadio>

                            <h:outputLabel/>
                            <h:panelGroup>
                                <p:commandButton value="Register" action="#{employeesBean.register}"
                                                 update="msg,msgs,empTable,registerPanel"/>
                                <p:commandButton value="Reset" type="reset"/>
                            </h:panelGroup>
                        </h:panelGrid>
                    </p:outputPanel>

                    <br/><br/><br/>

                    <b>DOuble Click to Select</b>
                    <p:dataTable style="text-align: center" id="empTable"
                                 value="#{employeesBean.empList}" var="emp"
                                 paginator="true" rows="10" paginatorAlwaysVisible="false"
                                 dblClickSelect="true" selectionMode="single"
                                 selection="#{employeesBean.employee}"
                                 onRowSelectComplete="empDialog.show()" onRowSelectUpdate="dialogForm:empDialogPanel"
                                 rowSelectListener="#{employeesBean.onSelectEvent}">
                        <f:facet name="header">
                            List of Employees
                        </f:facet>

                        <p:column sortBy="#{emp.name}" filterBy="#{emp.name}" filterMatchMode="contains">
                            <f:facet name="header">
                                Name
                            </f:facet>

                            <h:outputText value="#{emp.name}" />
                        </p:column>

                        <p:column headerText="Country" sortBy="#{emp.country}"
                                  filterBy="#{emp.country}" filterMatchMode="contains">
                            <h:outputText value="#{emp.country}" />
                        </p:column>

                        <p:column headerText="Birtday" sortBy="#{emp.birthdayInDate}"
                                  filterBy="#{emp.birthdayInString}" filterMatchMode="contains">
                            <h:outputText value="#{emp.birthdayInString}" />
                        </p:column>

                        <p:column headerText="Gender" sortBy="#{emp.gender}"
                                  filterBy="#{emp.gender}" filterMatchMode="contains">
                            <h:outputText value="#{emp.gender}" />
                        </p:column>

                        <f:facet name="footer">
                            Total : #{fn:length(employeesBean.empList)} employees
                        </f:facet>
                    </p:dataTable>
                </h:form>


                <h:form id="dialogForm">
                    <p:dialog widgetVar="empDialog" header="Employee Control" width="400">
                        <p:outputPanel id="empDialogPanel">

                            <p:messages showDetail="true" showSummary="true"/>
                            <h:panelGrid columns="2">
                                <h:outputLabel value="Name" />
                                <h:outputLabel value="#{employeesBean.name2}" style="font-weight: 900;"/>

                                <h:outputLabel value="Country" />
                                <p:inputText value="#{employeesBean.country2}"
                                             required="true" requiredMessage="please enter country"/>

                                <h:outputLabel value="Birthday" />
                                <p:calendar value="#{employeesBean.birthDay2}"
                                            required="true" requiredMessage="please enter birthday"
                                            maxdate="#{employeesBean.today}"
                                            navigator="true" yearRange="c-30:c+30"
                                            pattern="dd/MMM/yyyy"/>

                                <h:outputLabel value="Gender" />
                                <h:selectOneRadio value="#{employeesBean.male2}" required="true"
                                                  requiredMessage="please enter gender">
                                    <f:selectItem itemLabel="Male" itemValue="true"/>
                                    <f:selectItem itemLabel="Female" itemValue="false"/>
                                </h:selectOneRadio>

                                <h:outputLabel/>
                                <h:panelGroup>
                                    <p:commandButton value="Edit" action="#{employeesBean.editEmployee}"
                                                     update="empDialogPanel,mainForm:empTable"/>
                                    <p:commandButton value="Delete" action="#{employeesBean.delEmployee}"
                                                     update="empDialogPanel,mainForm:empTable"/>
                                    <p:commandButton value="Reset" type="reset"/>
                                    <p:commandButton value="Close" onclick="empDialog.hide()"/>
                                </h:panelGroup>
                            </h:panelGrid>

                        </p:outputPanel>
                    </p:dialog>
                </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>
